import { useState } from "react";

function MyComponents() {
  const [car, setcar] = useState([]);
  const [carYear, setcarYear] = useState(new Date().getFullYear());
  const [carName, setcarName] = useState("");
  const [carColor, setcarColor] = useState("#3a8830");
  function addCar() {
    setcar([...car, { name: carName, year: carYear, color: carColor }]);
    setcarYear(new Date().getFullYear());
    setcarName("");
    setcarColor("#3a8830");
  }
  function removeCar(index) {
    setcar(car.filter((car, i) => i !== index));
  }
  function ChangeYear(e) {
    setcarYear(e.target.value);
  }
  function ChangeName(e) {
    setcarName(e.target.value);
  }
  function ChangeColor(e) {
    setcarColor(e.target.value);
  }

  return (
    <div>
      <h2>List cars</h2>
      <ul>
        {car.map((car, index) => (
          <li key={index}>
            <span style={{color:car.color}}>
            {car.year}的{car.name}
            </span>
   <button style={{marginLeft:'10px'}} onClick={()=>removeCar(index)}>删除</button>
          </li>
        ))}
      </ul>
      <input type="number" value={carYear} onChange={ChangeYear} />
      <br />
      <input type="text" value={carName} onChange={ChangeName} />
      <br />
      <input type="color" value={carColor} onChange={ChangeColor} />
      <br />
      <button type="submit" onClick={addCar}>
        addCars
      </button>
    </div>
  );
}
export default MyComponents;
